<template>
  <div>
    <div class="tableDiv">
      <el-row style="margin-bottom:20px">
        <el-col :span="6">
          <div class="top-div">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input"></el-input>
          </div>
        </el-col>
        <!-- <el-col :span="6">
          <div class="top-div">
            <el-select v-model="value" placeholder="筛选">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col> -->
        <el-col :span="6">
          <div class="top-div">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div right">
           
            <el-button type="primary" icon="el-icon-plus" size="small" @click="handleClick"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
          </div>
        </el-col>
      </el-row>
    
      <el-table :data="tableData" style="width: 100%;margin-top:20px" class="custom-table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="z" label="企业名称" width="auto"></el-table-column>
        <el-table-column prop="y" label="出库日期" width="auto"></el-table-column>
        <el-table-column prop="x" label="订单号" width="auto"></el-table-column>
        <el-table-column prop="a" label="客户名称" width="auto"></el-table-column>
        <el-table-column prop="b1" label="货物名称" width="auto"></el-table-column>
        <el-table-column prop="b" label="规格型号" width="auto"></el-table-column>
        <el-table-column prop="c" label="商品数量" width="auto"></el-table-column>
        <el-table-column prop="f" label="商品单位" width="auto"></el-table-column>
        <el-table-column prop="e" label="商品金额" width="auto"></el-table-column>
         <el-table-column prop="e" label="出库仓库" width="auto"></el-table-column>
         <el-table-column prop="e" label="发货地址" width="auto"></el-table-column>
          <el-table-column prop="e" label="收货地址" width="auto"></el-table-column>
       
        <el-table-column prop="h" label="备注" width="auto"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="handleClick">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="添加收获入库信息" :visible.sync="dialogVisible" width="600px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="70px">
            <el-form-item label="订单编号">
              <el-input v-model="formInline.user1" placeholder="订单编号"></el-input>
            </el-form-item>
            <el-form-item label="规格">
              <el-input v-model="formInline.user2" placeholder="规格"></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="formInline.user3" placeholder="数量"></el-input>
            </el-form-item>
            <el-form-item label="金额">
              <el-input v-model="formInline.user4" placeholder="金额"></el-input>
            </el-form-item>
            <el-form-item label="拣货方式">
              <el-input v-model="formInline.user5" placeholder="拣货方式"></el-input>
              <!-- <el-date-picker v-model="formInline.user5" type="date" placeholder="选择日期"></el-date-picker> -->
            </el-form-item>
            <el-form-item label="拣货区域">
              <el-input v-model="formInline.user6" placeholder="拣货区域"></el-input>
            </el-form-item>
             
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      title: "",
      tableData: [
        {
          z: "z21879817979831",
          y: "原材料入库",
          x: "x22292929299229",
          a: "内蒙古特产羊肋骨",
          b1: "食品",
          b: "960",
          c: "358",
          d: "3260.52",
          f: "790",
          e: "5000",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z8937938982384343",
          y: "原材料入库",
          x: "x3399939939393934",
          a: "山东特产黑猪排骨",
          b1: "食品",
          b: "12",
          c: "358",
          d: "3260.52",
          f: "600",
          e: "333",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z823344444444455",
          y: "原材料入库",
          x: "x334555666666666",
          a: "辽宁北镇猪手",
          b1: "食品",
          b: "866",
          c: "358",
          d: "3760.52",
          f: "232",
          e: "2333",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z434345345455555",
          y: "原材料入库",
          x: "x232424354466678",
          a: "俄罗斯帝王蟹",
          b1: "食品",
          b: "666",
          c: "358",
          d: "4260.52",
          f: "449",
          e: "200",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z123243545466565",
          y: "原材料入库",
          x: "x875543433222344",
          a: "陕西软籽石榴",
          b1: "食品",
          b: "676",
          c: "358",
          d: "3460.92",
          f: "21",
          e: "100",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z244556633222222",
          y: "成品入库",
          x: "x344565767687888",
          a: "中性笔",
          b1: "文具",
          b: "960",
          c: "358",
          d: "3260.56",
          f: "1.2",
          e: "5000",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z232435546577888",
          y: "成品入库",
          x: "x976654343432322",
          a: "姓名贴",
          b1: "文具",
          b: "960",
          c: "358",
          d: "3260.56",
          f: "0.5",
          e: "5000",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z134455667555454",
          y: "成品入库",
          x: "x765433333234455",
          a: "过功能格尺",
          b1: "文具",
          b: "960",
          c: "358",
          d: "3260.34",
          f: "5.2",
          e: "5000",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z223455667778866",
          y: "成品入库",
          x: "x775544332224567",
          a: "橡皮",
          b1: "文具",
          b: "960",
          c: "358",
          d: "3260.34",
          f: "0.2",
          e: "5000",
          j: "张天浩",
          h: "2024-4-26"
        },
        {
          z: "z234546677777777",
          y: "成品入库",
          x: "x875544333356677",
          a: "削笔刀",
          b1: "文具",
          b: "960",
          c: "358",
          d: "3260.45",
          f: "4.5",
          e: "5000",
          j: "张天浩",
          h: "2024-4-26"
        }
      ],
      input: "",
      formInline: {
        user1: "",
        user2: "",
        user3: "",
        user4: "",
        user5: "",
        user6: "",
        region: ""
      },
      options: [
        {
          value: "选项1",
          label: "生活用品"
        },
        {
          value: "选项2",
          label: "装修"
        },
        {
          value: "选项3",
          label: "食品"
        },
        {
          value: "选项4",
          label: "文具"
        }
      ],
      value: "",
      value1: ""
    };
  },
  methods: {
    handleClick(data) {
      this.title = data;
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 98%;
  background-color: #fff;
}
.right {
  /* padding-top: 4px; */
  line-height: 32px;
}
.tableDiv {
  background-color: #fff;
  /* margin-top: 20px; */
  padding: 20px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}

.img-circle {
  width: 50px; /* 设置图片宽度 */
  height: 50px; /* 设置图片高度，与宽度相等 */
  border-radius: 50%; /* 设置四个角为圆角 */
  object-fit: cover; /* 确保图片内容适合容器大小 */
  vertical-align: middle;
  margin-right: 20px;
}
/deep/ .el-select {
  width: 100%;
  height: 42px;
}
/deep/ .el-date-editor {
  width: 100%;
}
/deep/ .el-input__inner {
  height: 32px;
}
/deep/ .el-input__icon {
  line-height: 32px;
}
</style>


